<template>
  <div>
    <!-- 导航栏 -->
     <!-- 这个是使用a 标签实现跳转 -->
   <!--  <div class="nav_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div> -->
    <!-- 使用router-link 实现跳转 -->
    <div class="nav_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    
    <!-- 页面主体内容 -->
    <div class="content_wrap">
      <!-- 路由出口 - 匹配的组件会在这里显示 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
/* 导航栏样式 */
.nav_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 60px; /* 设置导航栏高度 */
  background-color: #333; /* 深灰色背景 */
  z-index: 100; /* 确保导航栏在最上层 */
}

.nav_wrap a {
  flex: 1; /* 平均分配宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 18px;
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.nav_wrap a:hover {
  background-color: #555; /* 悬停时颜色变深 */
}

/* 页面主体内容样式 */
.content_wrap {
  padding-top: 60px; /* 设置顶部内边距，值等于导航栏高度 */
  min-height: 100vh; /* 确保内容区域至少占满整个视口高度 */
  background-color: #f8f9fa; /* 浅灰色背景 */
}
.nav_wrap a.router-link-active{
  background-color: aqua;
}
</style>